{% extends 'base_main.html' %}

{% load static %}

{% block ext_css %}
    {{ block.super }}

    <link rel="stylesheet" href="{% static 'axf/main/home/css/home.css' %}">
    <link rel="stylesheet" href="{% static 'axf/main/home/css/swiper.css' %}">

{% endblock %}

{% block title %}
    {{ block.super }}
    首页
{% endblock %}

{% block ext_js %}
    {{ block.super }}

    <script type="text/javascript" src="{% static 'axf/main/home/js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'axf/main/home/js/home.js' %}"></script>

{% endblock %}

{% block content %}
    {{ block.super }}

{#    <div class="swiper-container">#}
{#    <div class="swiper-wrapper">#}
{#        <div class="swiper-slide">Slide 1</div>#}
{#        <div class="swiper-slide">Slide 2</div>#}
{#        <div class="swiper-slide">Slide 3</div>#}
{#    </div>#}
{#    <!-- 如果需要分页器 -->#}
{#    <div class="swiper-pagination"></div>#}

    <div id="home">
    {#    轮播#}
        <div id="topSwiper" class="swiper-container">
            <div class="swiper-wrapper">
                {% for wheel in wheels %}
                    <a href="#" class="swiper-slide">
                        <img src="/static{{ wheel.img }}" alt="">
                    </a>
                {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
        </div>

    {#    topmenu#}
        <div class="topMenu">
            <nav>
                <ul>
                    {% for nav in navs %}
                        <li>
                            <img src="/static{{ nav.img }}" alt="">
                            <span>{{ nav.name }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>

    {#   swiperMenu#}
        <div id="swiperMenu" class="swiper-container">
            <ul class="swiper-wrapper">
                {% for mustbuy in mustbuys %}
                    <li class="swiper-slide">
                        <img src="/static{{ mustbuy.img }}" alt="">
                    </li>
                {% endfor %}
            </ul>
        </div>

    {#    mainshow#}
        {% for mainshow in mainshows %}
            <div class="mainInfo">
                <section>
                    <h3>
                        {{ mainshow.name }}
                        <a href="#">更多></a>
                        <span></span>
                    </h3>
                    
                    <div>
                        <a href="#">
                            <img src="/static{{ mainshow.img }}" alt="">
                        </a>

                    </div>
                    
                    <ul>
                        <li>
                            <a href="#">
                                <img src="/static{{ mainshow.img1 }}" alt="">
                                <span class="description">{{ mainshow.longname1 }}</span>
                                <span>￥{{ mainshow.price1 }}</span>
                                <s>￥{{ mainshow.marketprice1 }}</s>
                            </a>
                            <button>
                                <span>+</span>
                            </button>
                        </li>
                        <li>
                            <a href="#">
                                <img src="/static{{ mainshow.img2 }}" alt="">
                                <span class="description">{{ mainshow.longname2 }}</span>
                                <span>￥{{ mainshow.price2 }}</span>
                                <s>￥{{ mainshow.marketprice2 }}</s>
                            </a>
                            <button>
                                <span>+</span>
                            </button>
                        </li>
                        <li>
                            <a href="#">
                                <img src="/static{{ mainshow.img3 }}" alt="">
                                <span class="description">{{ mainshow.longname3 }}</span>
                                <span>￥{{ mainshow.price3 }}</span>
                                <s>￥{{ mainshow.marketprice3 }}</s>
                            </a>
                            <button>
                                <span>+</span>
                            </button>
                        </li>
                    </ul>
                </section>
        </div>
        {% endfor %}



    </div>

{% endblock %}

